<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%- include ../taglibs/layout_head.ejs%>
    <%- include ../taglibs/layout.css.ejs%>
    <link href="js/plugins/zTree/css/metroStyle/metroStyle.css" rel="stylesheet">
</head>
<body>
<%-include("../taglibs/header.ejs",{params:{className:"active",dataIsActive:"true"}})%>
<div class="nav-body" id="divContent">
    <div class="nav-box">
        <div class="row">
            <div class="col-sm-4 col-md-3 col-lg-2 nav-box-left-box">
                <%-include("dataManageLeftMenu.ejs",{params:{className:"active",roleManage:"true"}})%>
            </div>
            <div class="col-sm-6 col-md-9 col-lg-10 right-container-box">
                <div class="right-container">
                    <div class="row">
                        <div class="col-sm-12">
                            <a class="back-view" id="back-view">
                                <i class="fa fa-chevron-left fa-back-left"></i>
                                返回
                            </a>
                        </div>
                    </div>
                    <section class="content content-table">
                        <div style="display: block">
                            <ol class="head-breadcrumb">
                                <li>
                                    <a>角色管理</a>
                                </li>
                                <li class="active">
                                    <%= titleTxt%>
                                </li>
                            </ol>
                            <div class="form-content">
                                <form class="form-horizontal form-validBox" id="userInfoForm">
                                    <input type="text" name="privilegeIds" id="privilegeIds" hidden="hidden">
                                    <input type="text" name="id" id="roleId" hidden="hidden">
                                    <div class="form-group">
                                        <label for="inputEmail3" class="col-sm-2 col-sm-offset-3 control-label ">角色名称：</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" id="roleName" name="roleName">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="userName" class="col-sm-2 col-sm-offset-3 control-label">权限列表：</label>
                                        <div class="col-sm-4">
                                            <input type="text"
                                                   class="form-control" id="privilegeNames"
                                                   name="privilegeNames" style="padding-right:54px; " readonly="readonly">
                                            <button type="button" class="btn btn-theme selectPrivilege"
                                                    style="position: absolute;top: 0px;right: 15px;">选择</button>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="linkName" class="col-sm-2 col-sm-offset-3 control-label"></label>
                                        <div class="col-sm-4" >
                                            <button type="button" id="submitForm" class="btn btn-round btn-theme" style="width: 100%">保 存</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myTreeDialog">
    <div class="modal-dialog" style="width: 320px;">
        <div class="modal-content" style="width: 320px;">
            <div class="modal-header">
                <button type="button" class="close" onclick="closeTreeDialog()">×</button>
                <h4 class="modal-title" id="NoPermissionModalLabel">角色权限</h4>
            </div>
            <div class="modal-body" style="height:320px;max-height:320px;max-width: 320px;
                overflow: auto;">
                <ul id="userCommonTree" class="ztree">
                </ul>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info"  type="button" onclick="getAllCheckNodes()">确 定</button>
            </div>
        </div>
    </div>
</div>
<%-include ../taglibs/layout.js.ejs%>
<script src="/js/plugins/zTree/js/jquery.ztree.all-3.5.js"></script>
<script src="/js/plugins/zTree/js/jquery.ztree.exhide-3.5.js"></script>
<!--<script src="/js/ztree/ztree-cus-table.js"></script>-->
<script src="/js/ztree/ztree-cus-check.js"></script>
<script src="/js/ztree/ztree-privilege.js"></script>
<script type="text/javascript" src="js/viewpage/dataManage/dataManage.js"></script>
<script type="text/javascript" src="js/viewpage/dataManage/role/role.js"></script>
<script type="text/javascript">
    var url = '/editRoleInfo/querySysPrivilege';
    var _id='<%=id%>';
    $(function () {
        RoleInfo.initEditRolePage();
        PrivilegeTreeComponents.initUserTree('id', 'pId', 'name',clickTree,treeCheck, "checkbox");
        PrivilegeTreeComponents.loadUserTree(url,"userCommonTree");
        $(".selectPrivilege").on("click",function () {
            $("#myTreeDialog").modal("show");
        })
        if(_id){
            queryRoleInfo();
        }
    })
    function closeTreeDialog() {
        $("#myTreeDialog").modal("hide");
    }
    function clickTree(event, treeId, treeNode) {
//        debugger;
//        var flag=treeNode.checked;
//        tree_Obj.checkNode(treeNode, true, true);
//        selectTreeNode(treeNode);
    }
    function treeCheck(event, treeId, treeNode, clickFlag) {

    }

    function getAllCheckNodes() {
        var nodes = privilegeObj.getCheckedNodes(true);
        var nodeIds = [];
        var nodeNames = [];
        for(var n = 0,_len=nodes.length;n<_len;n++){
            var _node =nodes[n];
            if(_node.id!=-99999){
                nodeIds.push(_node.memo);
                nodeNames.push(_node.name);
            }
        }
        if(nodeIds.length){
            $("#privilegeNames").val(nodeNames.toString());
            $("#privilegeIds").val(nodeIds.toString());
        }else{
            $("#privilegeNames").val("");
            $("#privilegeIds").val("");
        }
        closeTreeDialog();
    }
    function queryRoleInfo() {
        $.ajax({
            url:"/editRoleInfo/queryRoleInfo",
            type:"POST",
            data:{id:_id},
            dataType:"json"
        }).done(function (result) {
            if(result.isSuccess === true){
                var data = result.data;
                var _roel =data.role;
                var _pri =data.pri;
                for(var k in _roel){
                    $("#userInfoForm").find("[name='"+k+"']").val(_roel[k]);
                }
                if(_roel.sysPrivileges.length){
                    var privilegeIds = [];
                    var priItems = [];
                    var _sysPrivileges = _roel.sysPrivileges;
                    for(var i=0;i<_sysPrivileges.length;i++){
                        var _sysPrivilege =_sysPrivileges[i]
                        privilegeIds.push(_sysPrivilege["id"]);
                    }
                    for(var j=0;j<_pri.length;j++){
                        var _priItem =_pri[j]
                        priItems.push(_priItem["resName"]);
                    }
                    $("#privilegeIds").val(privilegeIds.toString());
                    $("#privilegeNames").val(priItems.toString());
                    var bTreeObj = privilegeObj;
                    $.each(privilegeIds, function (i, item) {
                        var select_node = bTreeObj.getNodeByParam("id", item+"_res", null);
                        if(select_node&&!select_node.isParent)
                            bTreeObj.checkNode(select_node, true, true);
                    });
                }
            }
        })
    }
</script>
</body>
</html>